import React, { Component, Fragment } from "react";
// router
import { Link } from "react-router-dom";
// antd
import { Button, Tabs, Tag, Tooltip, message } from "antd";
import Action from "@c/buttonAction/Index";
// api
import { syncDomainData } from "@api/raycloud"
// table 组件
import TableComponent from "@c/tableData/Index";

const { TabPane } = Tabs;

class PublicDomainList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            // flag
            flag: false,
            // 请求参数
            pageNumber: 1,
            pageSize: 10,
            keyWord: "",
            // 表头
            tableConfig: {
                url: "aliyundomainList",
                method: 'post',
                checkbox: true,
                thead: [
                    { 
                        title: "域名", 
                        dataIndex: "DomainName", 
                        key: "DomainName",
                        render: (DomainName, rowData) => {
                          return (
                            <Link to={{ pathname: '/index/domain/details/'+rowData.DomainName, 
                                        state:{ domain_name: rowData.DomainName, platform: 'aliyun' }}}>{DomainName}
                            </Link>
                          )
                        }
                    },
                    { title: "产品类型", dataIndex: "VersionName", key: "VersionName" },
                    { 
                        title: "版本Code", 
                        dataIndex: "VersionCode", 
                        key: "VersionCode",
                        render: VersionCode => {
                            return (
                                <div>
                                    { VersionCode === 'mianfei' ? '免费' : '付费'}
                                </div>
                            )
                        }
                    },
                    { title: "标签", dataIndex: "Tags", key: "Tags" },
                    { 
                        title: "记录数", 
                        dataIndex: "RecordCount", 
                        key: "RecordCount",
                        sorter: (a, b) => a.RecordCount - b.RecordCount,
                        sortDirections: ['descend']
                    },
                    { title: "域名分组", dataIndex: "ResourceGroupId", key: "ResourceGroupId" },
                    { title: "创建时间", dataIndex: "CreateTime", key: "CreateTime" },
                    { 
                        title: "操作", 
                        dataIndex: "operation", 
                        key: "operation", 
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => this.domainDetail({domain_name: rowData.DomainName,platform: 'aliyun'})}>详情</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "域名", 
                        name: "KeyWord", 
                        placeholder: "域名关键字"
                    }
                ]
            },
            tableConfig2: {
                url: "tencentdomainList",
                method: 'post',
                checkbox: true,
                thead: [
                    { 
                        title: "域名", 
                        dataIndex: "Name", 
                       
                        key: "Name",
                        render: (Name, rowData) => {
                          return (
                            <Link to={{ pathname: '/index/domain/details/'+rowData.Name, 
                                        state:{ domain_name: rowData.Name, platform: 'tencent' }}}>{Name}
                            </Link>
                          )
                        }
                    },
                    
                    { 
                        title: "记录数", 
                        dataIndex: "RecordCount", 
                        key: "RecordCount",
                        sorter: (a, b) => a.RecordCount - b.RecordCount,
                        sortDirections: ['descend']
                    },
                    { title: "创建时间", dataIndex: "CreatedOn", key: "CreatedOn" },
                    { title: "更新时间", dataIndex: "UpdatedOn", key: "UpdatedOn" },
                    { 
                        title: "状态", 
                        dataIndex: "Status", 
                        key: "Status",
                        render: tag => {
                            let color = tag === 'ENABLE' ? 'geekblue' : 'volcano';
                            if (tag === 'SPAM') {
                                color = 'red';
                            }
                            return (
                                <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                                </Tag>
                            )
                        }
                    },
                    { 
                        title: "套餐", 
                        dataIndex: "IsVip", 
                        key: "IsVip",
                        render: IsVip => {
                            return (
                                <div>
                                    { IsVip === 'YES' ? '付费' : '免费'}
                                </div>
                            )
                        }
                    },
                    { title: "备注", dataIndex: "Remark", key: "Remark" },
                    { 
                        title: "操作", 
                        dataIndex: "operation", 
                        key: "operation", 
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => this.domainDetail({domain_name: rowData.Name, platform: 'tencent'})}>详情</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "域名", 
                        name: "KeyWord", 
                        placeholder: "域名关键字"
                    }
                ]
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){}

    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }

    // 跳转详情页
    domainDetail = (data) => {
        console.log(data)
        const domain_name = data.domain_name;
        this.props.history.push({ pathname: `/index/domain/details/${domain_name}`, 
                                  state: data // state传多个参数
                                })
    }

    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }

    /** 同步 */
    syncDomain = () => {
        syncDomainData().then(response => {
            const responseData = response.data;
            console.log(responseData)
            message.info(responseData.msg);
        })
    }

    render(){
        return (
            <Fragment>
                <Tabs defaultActiveKey="1">
                    <TabPane tab="阿里云" key="1">
                        <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig} >
                            <Tooltip title="云后台域名有变更时操作，同步钉钉审批流程域名表"><Button type="primary" onClick={this.syncDomain}>同步域名</Button></Tooltip>
                        </TableComponent> 
                    </TabPane>
                    <TabPane tab="腾讯云" key="2">
                        <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig2} />
                    </TabPane>
                </Tabs>
            </Fragment>
        )
    }
}
export default PublicDomainList;